<%@page import="isquirrel.util.Utilities"%>
<%@page import="isquirrel.util.HibernateUtil"%>
<%@page import="isquirrel.UserManager"%>
<%@page import="isquirrel.FacebookAPI" %>
<%@page import="isquirrel.beans.User"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.List" %>
<%@page import="java.util.Set" %>
<%@page import="java.text.DecimalFormat" %>
<%@page import="java.util.Iterator" %>
<%@page import="java.util.Vector" %>
<%@page import="java.util.Collections" %>
<%@page import="isquirrel.beans.Interest" %>
<%@page import="isquirrel.beans.Friend" %>


<div id="search">
	<div id="search_isquirrel"> 
		<div style="font-weight: bold; color: rgb(114, 114, 114);">Search iSquirrel</div>
		<p style="font-size:0.68em">
			Search by name, username, or even type in keywords to search for relevant people. For example, searching for 
			<b>traveling</b> will find people that have traveling listed as one of their interests.
		</p>
		<div>
			<p>
				<input type="text" class="mediuminput" id="query" name="query" />
				<input type="button" id="search_name_button" class="mediumbtn" name="search_name_button" value="Search" />
				<input type="button" style="display:none" id="clear_search_button"  name="clear_search_button" value="Clear Search" />
			</p>
		</div>
	</div>
	<div id="search_results" style="display:none">
	</div>
</div>
<div id="right_search">
<div id="search_facebook">
		<div style="font-weight: bold; color: rgb(114, 114, 114);">Find friends from Facebook</div>
		<p style="font-size:0.68em">
			Reconnect to Facebook (or connect for the first time if you haven't done so) to add Facebook friends as your 
			friends on iSquirrel.
		</p>
		<div id="fb_login">
			<img onclick="facebook_login();" id="fb_login_image" src="http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_large_long.gif" alt="Connect" />		
		</div>
</div>
	<div id="suggestions">
		<span style="font-weight: bold; color: rgb(114, 114, 114);" >Friend suggestions</span>
		<div id="suggestions_container">
		</div>
		<div id="suggest_viewmore" style="visibility:hidden" class='viewmore clickable'>
			View more
		</div>
	</div>

</div>
<script type="text/javascript">

var FRIENDS_ADDED = 0 ;

get_suggestions = function(){

	var viewmorediv = $("suggest_viewmore");
	if (viewmorediv.style.visibility === "visible"){
		viewmorediv.update("<img src='/<%=request.getRequestURI().split("/")[1]%>/images/fetching.gif' />").removeClassName("clickable").stopObserving('click');
				
	}
	new Ajax.Request('/<%= request.getRequestURI().split("/")[1]%>/' + 'servlet/FriendSuggestions',{

		method: "get",
		onSuccess: function(transport){
			
			$("suggestions_container").update(transport.responseText);
			FRIENDS_ADDED = 0;
			viewmorediv.update("View more").addClassName("clickable");
			viewmorediv.style.visibility = "hidden";
			
		}
	});

};

get_suggestions();

facebook_login = function(){

	$("fb_login_image").src='/<%= request.getRequestURI().split("/")[1] %>/images/barloader.gif';
	
	FB_RequireFeatures(["Api"], function(){ 

		var api_key = '748303a5c47afd1a0823809e012c155e'; 
		FB.Facebook.init(api_key, "/<%= request.getRequestURI().split("/")[1] %>/xd_receiver.htm");
		var api = FB.Facebook.apiClient;

		FB.Connect.requireSession(function(){

			api.friends_get(new Array(), function(result, exception){
				var friends = result.join("+");
				
				new Ajax.Request('/<%= request.getRequestURI().split("/")[1]%>/' + 'servlet/Profiler',{
				
						method: "post",
						parameters: {type:1, friends: friends},
						onSuccess: function(response){

							Fudel.redirect('/<%= request.getRequestURI().split("/")[1] %>','servlet/Profiler?nextp=network&force=findfriends');
								
						}
				});	 

			}); 

		},function(){

			$("fb_login_image").src='http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_large_long.gif';

		});
	});
};
	
search = function() {
	$("search_name_button").value = "Searching..";
	new Ajax.Request( 'servlet/FindFriends', {
		method: 'post',
		parameters: {
		 				'query': $('query').value
			 		} ,  
	  	onComplete: function(transport) {
	 				  	var response = transport.responseText;
	 				  	$('search_results').update(response);
	 				  	$('search_results').appear();
	 					$("search_name_button").value = "Search";
	 				  	
	 				}
	 				});

};
//I used window.follow = function() rather than function follow() to make it available to
//global space after being evaluated by evalScripts() function of prototype.
//Use this way for any function you want to be evaluated in global space when loaded with Ajax

// 29/11 -> Alexis: I changed the xxxFriend servlets thus im changing the requests here as well.

follow = function(spanelem,friend_id) {
	spanelem.update("Adding..");

	new Ajax.Request( 'servlet/AddFriend', {
		method: 'post',
		parameters: {
		 				'friend_id': friend_id
			 		} ,  
	  	onComplete: function(transport) {
	 				  	var response = transport.responseText.evalJSON();
	 				  	if (response.error == 0) {
	 				  		var onclick = spanelem.readAttribute("onclick");
							spanelem.removeClassName("follow")
									.addClassName("stopfollow")
									.writeAttribute({onclick: "stop"+ onclick})
									.update("Remove from friends");

							if (FRIENDS_ADDED !== undefined){

	 				  			++FRIENDS_ADDED;
	 				  		}
	 				  		if (FRIENDS_ADDED === $$("div.friendsuggestion").length){
	 				  			var morediv = $("suggest_viewmore");
	 				  			if (morediv.style.visibility === "hidden"){
	 				  				morediv.observe("click", get_suggestions);
	 				  				morediv.setStyle({visibility: "visible"});
	 				  			}
							}
	 				  	}
	 				  	else{
	 				  	
	 					}
			 		}
	 			});
};

stopfollow = function(spanelem,friend_id) {
	spanelem.update("Removing..");
	var morediv = $("suggest_viewmore");
	morediv.setStyle({visibility: "hidden"});
	--FRIENDS_ADDED;
	new Ajax.Request( 'servlet/RemoveFriend', {
		method: 'post',
		parameters: {
	 				'friend_id': friend_id
		 		} ,  
  		onComplete: function(transport) {
 				  	var response = transport.responseText.evalJSON();
 				  	if (response.error == 0) {
 	 				  	var onclick = spanelem.readAttribute("onclick");
						spanelem.removeClassName("stopfollow")
								.addClassName("follow")
								.writeAttribute({onclick: onclick.substring(4, onclick.length)})
								.update("Add to friends");
 				  	}
 				  	else{

 				  	}
 				  	
 				}
		});
		};

Event.observe('suggest_viewmore', 'click', get_suggestions);
Event.observe('search_name_button', 'click', search);
Event.observe('query', 'keydown', function(event) {
		if (event.keyCode == 13) {
			search();
		}
	});

</script>	